<template>
  <div class="bgImage h100vh">
    <n-form
      ref="formRef"
      label-placement="left"
      :label-width="80"
      :model="formValue"
      :rules="rules"
    >
      <n-form-item label="账号" path="account">
        <n-input v-model:value="formValue.account" placeholder="输入账号" />
      </n-form-item>
      <n-form-item label="密码" path="password">
        <n-input
          v-model:value="formValue.password"
          type="password"
          show-password-on="click"
          placeholder="输入密码"
        />
      </n-form-item>
      <n-form-item label=" ">
        <div class="width100">
          <n-button class="mb-10" block @click="login"> 登录 </n-button>
          <n-button text @click="enroll"> 注册 </n-button>
        </div>
      </n-form-item>
    </n-form>
  </div>
</template>

<script setup lang="ts">
import { NForm, NFormItem, NInput, NButton, type FormInst } from "naive-ui";
import {
  type LoginType,
  login as apiLogin,
  passwordRule,
  accountRule,
} from "~/api/auth";
useHead({
  title: "登录", //网站标题
});
const formRef = ref<FormInst | null>(null);
const formValue = ref<LoginType>({
  account: "",
  password: "",
});
const rules = {
  account: [
    {
      required: true,
      message: "请输入账号",
      trigger: "blur",
    },
    {
      pattern: accountRule,
      message: "用户账号长度大于8,小于16",
      trigger: "blur",
    },
  ],
  password: [
    {
      required: true,
      message: "请输入密码",
      trigger: ["input", "blur"],
    },
    {
      pattern: passwordRule,
      message:
        "密码应包含数字、大小写字母、特殊符号中的3类、且长度大于8、小于16、",
      trigger: ["input", "blur"],
    },
  ],
};
const login = (e: MouseEvent) => {
  e.preventDefault();
  formRef.value?.validate(async (errors) => {
    if (!errors) {
      const { account, password } = formValue.value;
      apiLogin({ account, password });
    } else {
      naiveui.message.error(errors[0][0].message ?? "表单验证错误");
    }
  });
};
const enroll = async () => {
  await navigateTo("/enroll");
};
</script>
<style lang="scss" scoped>
.n-form {
  width: 500px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}
.n-input {
  --n-color: rgba(255, 255, 255, 0.1);
}
</style>
